<!--
 * Created by sf
 * 2019/12/5
 -->

<template>
  <div id="ranking-board">
    <div class="ranking-board-title">功能使用占比（微蒸烤产品）</div>

    <el-row
      :gutter="24"
      type="flex"
      justify="center"
      align="middle"
      style="overflow: visible">
      <el-col :span="24">
        <ring
          :raw-data="rawData"
          style="margin: -120px 0 40px 0;" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ring from './ring'
import commonMixin from '@/mixins/common'

export default {
  mixins: [ commonMixin ],
  components: { ring },
  data () {
    return {
      loading: false,
      rawData: []
    }
  },
  computed: {
    renderData () {
      // const length = this.rawData.length
      // let arr = []
      //
      // for (let i = 0; i < length; i++) {
      //   let _item = Object.assign({}, this.rawData[i])
      //   const percent = (_item.percent * 100).toFixed(2)
      //   _item.mode = `${_item.mode}：${percent}%`
      //   delete _item.percent
      //   arr.push(_item)
      // }
      // console.log(arr)
      // return arr

      const a = this.rawData.map(item => {
        let _item = Object.assign({}, item)
        const percent = (_item.percent * 100).toFixed(2)
        _item.mode = `${item.mode}：${percent}%`
        delete _item.percent
        return _item
      })
      return a
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loading = true
      let { data: res } = await this.$http.get(this.getApiUrl('/datapanel/show/modePro', false))
      this.loading = false
      if (res.code === 0) {
        this.rawData = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
  #ranking-board {
    box-shadow: 0 0 3px blue;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    padding: 0px 30px;

    .ranking-board-title {
      font-weight: bold;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

  }
</style>
